<style include="firmware-fonts firmware-shared">
  #container {
    border-bottom: var(--cr-separator-line);
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  #description {
    margin-bottom: 8px;
  }

  #name {
    margin-bottom: 2px;
  }

  #version {
    margin-bottom: 4px;
  }

  #priorityText::before {
    content: '•';
    margin-inline: 8px;
  }

  .update-info {
    margin-inline-end: 48px;
  }

  .update-info > div {
    margin: 8px 0;
  }
</style>
<div id="container">
  <div class="update-info">
    <div id="name" class="firmware-name-font">
      [[computeDeviceName_(update.deviceName)]]
    </div>
    <div id="version" class="firmware-version-font">
      <span>[[computeVersionText_(update.deviceVersion)]]</span>
      <span id ="priorityText"
          hidden$="[[!isCriticalUpdate_(update.priority)]]">
        [[i18n('criticalUpdate')]]
      </span>
    </div>
    <div id="description" class="firmware-description-font">
      [[computeDeviceDescription_(update.deviceDescription)]]
    </div>
  </div>
  <cr-button id="updateButton" on-click="onUpdateButtonClicked_"
      disabled="[[disabled]]">
    [[i18n('updateButton')]]
  </cr-button>
</div>
